// 这是less的注释不会在css中显示
/* 这是css的注释会在css中显示 */
// 变量 @+变量名
@bg1:#ccc;
@bg2:#bfa;
@bg3:#baf;
@bg4:red;
//变量作为选择器和属性名
@bb:box1;
@wd:width;
@hig:height;
//变量作为选择器
.@{bb}{
    @{wd}:200px;
    background-color: @bg3;
    @{hig}:200px;
}
//可以使用变量来引用变量
@tt:'nihaoya';
@tts:tt;
.box1::after{
  content: @@tts;
}
//字符串插值：'@{变量名}其他字符串值'
@url:'./dsdadas';
//url(@{url}/b2.jpg);

//嵌套语法
.header{
    @{wd}:1100px;
    background-color:@bg2;
    @{hig}:600px;
    margin: 0 auto;
    .content{
       @{wd}:800px;
       @{hig}:500px;
       background-color: @bg1;
       .left{
           @{wd}:300px;
           @{hig}:300px;
           background-color: blue;
           margin-left: 20px;
           margin-right: 20px;
           float: left;
       }
       .right{
        @{wd}:300px;
        @{hig}:300px;
        background-color: red;
        float: left;
       }
    }
}
.footer{
    @{wd}:1100px;
    background-color: @bg1;
    @{hig}:400px;
    margin: 0 auto;
}